<template>
  <view class="app-container">
    <u-navbar placeholder fixed title="订单列表" left-icon=""></u-navbar>
    <view class="flex-1">
      <view class="bg-white">
        <u-tabs :list="tabs" @change="handleTabChange"></u-tabs>
      </view>
      <view class="p-20">
        <template v-if="orderStore.myList.length">
          <view
            v-for="(order, index) in orderStore.myList"
            :key="index"
            class="mb-20"
            @click="handleToOrderDetail(order.id)"
          >
            <my-order-item
              :price="order.plan_commission_amount"
              :name="formatState(order.state)"
              :send-address="order.shop_company_location.address"
              :send-name="order.shop_company_location.name"
              :send-location="order.shop_company_location"
              :gather-address="order.receiver_location.address"
              :gather-name="order.receiver_location.name"
              :gather-location="order.receiver_location"
              @toSendLocation="handleToSendLocation(order)"
              @toGatherLocation="handleToGatherLocation(order)"
            >
              <template #actions>
                <!-- <view v-if="order.state == 'picking'" style="width: 200rpx">
                  <u-button type="primary" shape="circle" @click="handlePickPackage(order.id)">取件</u-button>
                </view>
                <view v-if="order.state == 'delivering'" style="width: 200rpx">
                  <u-button type="success" shape="circle" @click="handleDelivery(order.id)">送达</u-button>
                </view> -->
              </template>
            </my-order-item>
          </view>
        </template>
        <template v-else>
          <u-empty text="暂无数据"></u-empty>
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onPullDownRefresh, onShow } from "@dcloudio/uni-app";
  import { useOrderStore } from "@/store/order";
  import { reactive } from "vue";

  const orderStore = useOrderStore();

  const params = reactive({
    page: 1,
    size: 20,
    // 订单状态，【picking】取件中，【delivering】配送中，【completed】已送达，【canceled】已取消
    state: "picking",
  });

  const tabs = [
    { name: "取件中", value: "picking" },
    { name: "配送中", value: "delivering" },
    { name: "已送达", value: "completed" },
    { name: "已取消", value: "canceled" },
  ];

  const formatState = (value) => {
    const current = tabs.find((i) => i.value == value);
    console.log(current);
    if (current) {
      return current.name;
    }
    return "";
  };

  async function handleTabChange(e) {
    params.state = e.value;
    await getList();
  }

  async function getList() {
    await orderStore.fetchMyOrderList(params);
  }

  function handleToOrderDetail(id) {
    uni.navigateTo({
      url: "/pages/order-detail/order-detail?id=" + id,
    });
  }

  function handleToSendLocation(order) {
    uni.navigateTo({
      url: `/pages/map-navigator/map-navigator?id=${order.id}&longitude=${order.shop_company_location.longitude}&latitude=${order.shop_company_location.latitude}`,
    });
  }

  function handleToGatherLocation(order) {
    uni.navigateTo({
      url: `/pages/map-navigator/map-navigator?id=${order.id}&longitude=${order.receiver_location.longitude}&latitude=${order.receiver_location.latitude}`,
    });
  }

  onShow(async () => {
    await getList();
  });

  onPullDownRefresh(async () => {
    await getList();
    uni.$u.toast("刷新成功");
    uni.stopPullDownRefresh();
  });
</script>

<style lang="scss" scoped>
  :deep(.u-tabs__wrapper__nav__item) {
    flex: 1;
  }
</style>
